<template>
    <div>
        <navBar :mybtn="false">
            特色课
            <template #my>
               <span @click="$router.push('/search')">搜索</span>
                <!-- <i class="iconfont icon-sousuo" style="font-size: 30px"></i> -->
            </template>
        </navBar>
        <div class="menu">
            <van-dropdown-menu>
                <van-dropdown-item title="排序" ref="item1">
                    <ul class="menu-item">
                        <li v-for="(v, i) in orderList" :class="{ active: item1active == i }"
                            @click="checkitem1(v.value, i)">
                            {{ v.title }}
                        </li>
                    </ul>
                </van-dropdown-item>

                <van-dropdown-item title="筛选" ref="item2">
                    <div class="menu-item2">
                        <div :class="['menu-item2-t', { active: item2active == i }]" v-for="(v, i) in classifyList"
                            @click="checkitem2(v.id, i)">
                            {{ v.name }}
                        </div>

                        <div v-for="v in num"></div>
                    </div>
                </van-dropdown-item>
            </van-dropdown-menu>
            <!-- 列表 -->
            <div>
                <itemty v-for="v in course" :v="v"></itemty>

                <h1 v-show="last">没有更多数据了</h1>
            </div>
        </div>

        <navBottom></navBottom>
    </div>
</template>
  
<script setup>
import itemty from "../components/conten/itemty.vue"
import { getCourseBasis, getCourseClassify } from '../http/course'
import {ref,computed,onMounted} from "vue"
const item1active=ref(0)
const item2active=ref(0)
const classifyList=ref([])
const orderList = ref([
    { title: "综合排序", value: 0 },
    { title: "最新", value: 1 },
    { title: "最热", value: 2 },
    { title: "价格从高到低", value: 4 },
    { title: "价格从低到高", value: 3 },
])
const last_page=ref(1)
const course=ref([])
const last=ref(false)
const courseList = ref({
    course_type: 0, //课程分类
    // limit: 5,
    classify_id: 0,
    page: 1,
    order_by: 0, // 0综合排序，1 最新
})
const num=computed(()=>{
    let num = 0;
    let yushu = classifyList.value.length % 4
    yushu === 0 ? (num = 0) : (num = 4 - yushu)
    return num
})
onMounted(()=>{
    getCourseBasisFn(),
    getCourseClassifyFn(),
        window.onscroll = () => {
            //变量scrollTop是滚动条滚动时，距离顶部的距离
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //变量windowHeight是可视区的高度
            let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            //滚动条到底部的条件
            //scrollTop!=0是由于其他功能在body上设置了最小高度100vh，切换tab的时候body高度位100vh。
            if ((Math.ceil(scrollTop + windowHeight) == parseInt(scrollHeight)) && scrollTop != 0) {
                if (courseList.value.page < last_page.value) {
                    courseList.value.page += 1;
                    getCourseBasisFn();
                    last.value = false;
                } else {
                    last.value = true;
                }

            }


            window.addEventListener("beforeunload", (e) => { window.scroll(0, 0) })
        }
})
const checkitem1 = (v, i)=>{
    item1active.value = i
    courseList.value.page = 1
    course.value= []
    console.log(v);
    courseList.value.order_by = v;
    getCourseBasisFn()
    // this.$refs.item1.toggle();
}
const checkitem2 = (v, i)=>{
    courseList.value.page = 1
    item2active.value = i
    course.value= []
    console.log(v);
    courseList.value.course_type = v;
    getCourseBasisFn()
    // this.$refs.item2.toggle();
}
const getCourseBasisFn= async()=>{
    let res = await getCourseBasis(courseList.value)
    let mylist=res.data.list
    // console.log(mylist);
    last_page.value = res.data.last_page
    course.value = [...course.value,...mylist]
    console.log(course);
}
const getCourseClassifyFn= async()=>{
    let res = await getCourseClassify()
    // console.log(res);
    classifyList.value = res.data.appCourseType;
}

</script>
  
<style lang="scss" scoped>
.menu {
    margin: 80px 0px;
}

.menu-item {
    text-align: center;
    line-height: 30px;
    font-size: 18px;

    li {
        border-bottom: 1px solid #eee;
    }
}

.menu-item2 {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    >div {
        width: 18vw;
        margin: 2vw;
        line-height: 45px;
        font-size: 20px;
        text-align: center;
    }
}

.menu-item2-t {
    background: #ebeefe !important;
    // color: #eb6100!important;
}

.active {
    color: #eb6100 !important;
}
</style>
